<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>

</head>
<body>
<div id="app8">
    <el-container>
        <!--垂直和水平导航栏-->
        <el-header style="width: 100%;"> <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1">体育馆场地预约系统</el-menu-item>
            <el-menu-item index="3" style="float:right"><a href="adminLogin.jsp" target="_blank" >退出登录</a></el-menu-item>
            <li style="float:right "><h5 style="color: #eeeeee;height: 5px;margin-top: 20px" v-model="adminname"> 管理员,{{adminname}},欢迎您！</h5></li>
            <div style="height: 1px;float:right" >
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" ></el-avatar>
            </div>
        </el-menu></el-header>
        <el-container>
            <el-aside width="200px"style="height: 650px"><el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    style="width: 100%;height:100%"
                    :inline="true">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>场地管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1" @click="toFieldManage">场地信息</el-menu-item>
                        <el-menu-item index="2-2" @click="addField()">增加场地</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="1-1" @click="toUserManage()">用户信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>公告管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1" @click="toNoticeManage">公告信息</el-menu-item>
                        <el-menu-item index="3-2" @click="publishNotice">发布公告</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>评论管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1" @click="toCommentManage()">评论信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>预约管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="5-1" @click="toFieldBookManage()">场地预约信息</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu></el-aside>

            <!--所有场地表格-->
            <el-main>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item><a href='admin.html'>后台管理</a></el-breadcrumb-item>
                    <el-breadcrumb-item>公告管理</el-breadcrumb-item>
                </el-breadcrumb>

                <el-table
                        ref="multipleTable"
                        :data="noticeData"
                        tooltip-effect="dark"
                        style="float:left;width: auto">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="adminname"
                            label="发布人"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="标题"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="fieldid"
                            label="场地号"
                            width="120">
                    </el-table-column>

                    <el-table-column
                            prop="publishtime"
                            label="发布时间"
                            width="160">
                    </el-table-column>

                    <el-table-column
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button type="text" size="small"@click="isDeleteNotice(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                </el-main>
        </el-container>
    </el-container>



   <!-- 发布公告对话框表单-->
    <el-dialog
            title="发布公告"
            :visible.sync="noticeDialogVisible"
            width="30%"
            >

        <el-form ref="form" :model="publishNoticsForm" label-width="80px">
            <el-form-item label="场地号">
                <el-input v-model="publishNoticsForm.fieldid"></el-input>
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="publishNoticsForm.title"></el-input>
            </el-form-item>
            <el-form-item label="公告内容">
                <el-input type="textarea" v-model="publishNoticsForm.information"   :autosize="{ minRows: 2, maxRows: 12}"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addNotice">提交</el-button>
                <el-button @click="noticeDialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>


    <!--表格-->





</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script src="js/axios-0.18.0.js"></script>

<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app8",

        mounted(){
            this.selectAllNotice();
            this.getAdminName();

        },
        methods: {
            //提交公告信息
            addNotice(){
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/addNotice?adminname="+_this.adminname,
                    method:"post",
                    data:_this.publishNoticsForm
                }).then(function (resp){
                    if(resp.data=="add_suc") {
                        _this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        _this.noticeDialogVisible = false;
                        _this.selectAllNotice();
                    }
                    if(resp.data=="not_all"){
                        _this.$message({
                            message: '请填写完整',
                            type: 'warning'
                        });
                    }
                    if(resp.data=="wrong_fieldid"){
                        _this.$message({
                            message: '无此场地号!',
                            type: 'warning'
                        });
                    }

                })

            },
            //获得登录的管理员姓名
            getAdminName(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/getLoginAdmin",
                    method:"get"
                }).then(function (resp){
                    _this.adminname=resp.data;
                })
            },
            //发布公告后弹窗
            publishNotice(){
                this.publishNoticsForm={};
                this.noticeDialogVisible=true;

            }
            ,
            //判断是否删除该公告信息
            isDeleteNotice(row){
                this.$confirm('是否删除该公告', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteNotice(row);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //删除公告
            deleteNotice(row){
                var _this = this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/deleteNotice?noticeid="+row.noticeid,
                    method:"get",
                }).then(function (resp){
                    if(resp.data=="delete_suc") {
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        _this.selectAllNotice();
                    }

                })

            },
            //查询所有公告
            selectAllNotice(){
                var _this=this;
                axios({
                    url:"http://localhost:8080/FieldBookSystem/selectAllNotice",
                    method:"get"
                }).then(function (resp){
                    _this.noticeData=resp.data;
                })
            },
            /*导航栏展开方法*/
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            /*导航栏展开方法*/
            //跳转到公告管理
            toFieldManage(){
                window.location.href="admin.html";

            },
            //跳转到公告管理
            toNoticeManage(){
                window.location.href="adminNoticeManage.html";

            },
            //跳转到评论管理
            toCommentManage(){
                window.location.href="adminCommentManage.html";
            },
            //跳转到用户管理页面
            toUserManage(){
                window.location.href="adminUserManager.html"
            },
            //跳转到场地预约管理页面
            toFieldBookManage(){
                window.location.href="adminBookManage.html"
            },


        },
        data() {
            return {
                //登录的管理员姓名模型
                adminname:'',
                //发布的公告模型
                publishNoticsForm:{},

                //发布公告弹窗状态模型
                noticeDialogVisible:false,
                //公告表格模型
                noticeData:[],
            }
        }

    })

</script>

</body>
</html>